<template>
	<view>
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map id="map" @markertap="bindTap" @controltap="bindControltap" :controls="controls"
					style="width: 100%;height: 93.5vh;" :markers="markers" :scale="15" :latitude="latitude"
					:longitude="longitude">
					
					
				</map>
				<button class="but" @click="startNav">开始导航</button>
				<!-- <div @click="startNav" class="aa" style="width: 100%; height: 6vh; background-color: #7ed084;" > <h3>开始导航</h3></div> -->
			</view>
		</view>
	</view>
</template>
 
<script>
	
	export default {
		data() {
			return {
				subNVue: '',
				subNVueShowDetail: '',
				msg: '',
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				//当前设备位置  
				dqlongitude:'115.2594968',  	
				dqlatitude: '30.452691',	
				longitude:'115.2594968', //导航的位置
				latitude: '30.452691',	
				name:'',
				controls: [],
				markers: [  //默认显示巡点的位置
					{
						id: 'gyqy',
						latitude: '',
						longitude: '',  
						title: '企业',
						iconPath: 'logo.png'
					}
				]
			}
 
		},
		
		onLoad: function (option) {
			this.getDeviceLocation();
			this.getLocation(option.item);
		},
		onReady() {
			this.createMap() //地图创建在页面中需要在onReady调用
		},

		methods: {
			getLocation(stationId){
				var that=this;
				that.$http.get("/two/getValveNavigation",{params:{stationId:stationId}}).then(res=>{	
					console.log("----------------------------------------------------",res);
						//目的地
				         that.longitude= res.data.mkln;
				         that.latitude = res.data.mklo;
						 //给点的坐标赋值
						 that.markers[0].longitude= res.data.ln;						 
						 that.markers[0].latitude = res.data.lo;
						 that.markers[0].title = res.data.name;
				}) 
			},
			// 创建地图
			createMap() {
				let mapContext = uni.createMapContext('map')
				mapContext.$getAppMap().showUserLocation() //显示用户位置
				let screenWidth =  uni.getSystemInfoSync().screenWidth
				var coefficient=screenWidth/750
				this.controls=[
					{
						id:"mapType",
						controlId:"mapType",
						position:{
							width: 72*coefficient,
							height: 72*coefficient,
							left: 658*coefficient,
							top:110*coefficient
						},
						iconPath:"./logo.png",
						clickable:true
					}
				]
			},
			// 获取设备位置
			getDeviceLocation() {
				plus.geolocation.getCurrentPosition(function(p){
					let longitude = p.coords.longitude 
					let latitude = p.coords.latitude
					console.log(`经度:${longitude} 纬度:${latitude}`)
					this.dqlongitude = longitude //当前位置
					this.dqlatitude = latitude
					}, function(e){
						console.log('Geolocation error: ' + e);
					},{"enableHighAccuracy":"true", // 是否高精确度获取位置信息
						"provider": "system"  // 优先使用的定位模块
					});
			},
			startNav() {
				var that=this;
				console.log("----------------------------------------------------");

				var dst = new plus.maps.Point(that.longitude,that.latitude);// 目的点  需WGS84坐标系

				var src = new plus.maps.Point(this.dqlongitude,this.dqlatitude); // 开始点
				// 调用系统地图显示 
				plus.maps.openSysMap( dst, that.markers[0].title, src );
			},
			bindControltap(e) {
				console.log(e)
			},
			bindTap(e) {
				console.log(e)
			},
		}
	}
</script>
 
<style>
.but{
	background-color: #7ed084;
	color:white;
	width: 300px;
	height: 42px;
	border:0;
	font-size: 16px;			
	border-radius: 30px;
}
</style>
 